<script lang="ts" setup name="swap-liquidityList">
import { foldDecimal } from "@@/utils/tools/format";
import useBalanceStore from "@@/store/useBalanceStore";
import { _require } from "@@/utils/tools";
import { LpCoin, WkLpInfo, LpInfo } from "../wkLoopInfo";
const props = defineProps<{
  lpCoinEnum: AnyObject<LpCoin>;
  getWkLpInfo: () => Promise<WkLpInfo | undefined>;
  lpInfo: LpInfo | undefined;
}>();
const balanceStore = useBalanceStore();

const coin0 = computed(() => balanceStore.getCoinByCode("USDT"));
const coin1 = computed(() => balanceStore.getCoinByCode("WKC"));
const lpCoin0 = computed<LpCoin | undefined>(
  () => props.lpCoinEnum[coin0.value?.id!]
);
const lpCoin1 = computed<LpCoin | undefined>(
  () => props.lpCoinEnum[coin1.value?.id!]
);
</script>
<template>
  <Ccard class="auto-MT-sm">
    <div class="flex-A-C">
      <Rimage size="42rem" :src="coin0?.logo" />
      <Rimage size="42rem" :src="coin1?.logo" />
      <div class="ML-xs">{{ coin0?.code }}/{{ coin1?.code }}</div>
      <div class="C-M1 B-M1-O1 ML-auto R-max PD-xs">
        {{ foldDecimal(Number(props.lpInfo?.myRatio) * 100, 4) }}%
      </div>
    </div>
    <Ccard bg="var(--C-B3)" class="PD-sm PT-xs PB-xs">
      <Ccell border-mode="bottom">
        <div class="C-T3">{{ lpCoin0?.code }}{{ $t("shu-liang") }}</div>

        <template #right>
          <div>{{ foldDecimal(lpCoin0?.balance, 4) }}</div>
        </template>
      </Ccell>
      <Ccell border-mode="bottom">
        <div class="C-T3">{{ lpCoin1?.code }}{{ $t("shu-liang") }}</div>
        <template #right>
          <div>{{ foldDecimal(lpCoin1?.balance, 4) }}</div>
        </template>
      </Ccell>
    </Ccard>
    <Rbutton
      @click="$router.push({ name: 'swap-addLiquidity' })"
      bg="var(--C-LG1)" borderStyle="none"
      :size="'large'"
    >
      {{ $t("tian-jia") }}
    </Rbutton>
    <Rbutton
      @click="$router.push({ name: 'swap-removeLiquidity' })"
      class="MT-md C-LG1"
      :size="'large'"
    >
      {{ $t("jie-chu") }}
    </Rbutton>
  </Ccard>
</template>
<style lang="scss" scoped></style>
